import React, { useState } from "react";
import "./style.css";
import { InboxOutlined } from "@ant-design/icons";

// import { compressPDFBase64, decompressPDFBase64 } from "./gizp";
import { Modal, Button, Upload, message } from "antd";
const { Dragger } = Upload;

const propsUpLoad = {
  name: "file",
  onChange(info) {
    const { status } = info.file;
    if (status !== "uploading") {
      console.log(info.file, info.fileList);
    }
    if (status === "done") {
      message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === "error") {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
const UpLoadPage = () => {
  const [upLoadFile, setUpLoadFile] = useState(false);

  const customRequest = async (data) => {
    const reader = new FileReader();
    let file = data.file;
    reader.readAsArrayBuffer(file);
    if (!file) {
      return;
    }

    reader.onload = (e) => {
      fetch("http://localhost:8989/upload" + file.name, {
        method: "post",
        body: e.target.result,
      }).then((res) => {
        console.log(res);
        // if (res.ok) {
        //   message.success(`${file.name} 文件上传成功!`);
        //   closUpLaodFile();
        // }
      });
    };
  };

  const closUpLaodFile = () => {
    setUpLoadFile(false);
  };

  return (
    <div className="FileUpLoadOrDownLoad">
      <div
        onClick={() => {
          setUpLoadFile(true);
        }}
      >
        <img src={require("../../static/image/upLaodFile.jpg")} />
        <p>文件导入</p>
      </div>
      <div>
        <img src={require("../../static/image/downLoad.jpg")} />
        <p>文件导出</p>
      </div>
      <Modal
        title="文件导入"
        open={upLoadFile}
        onOk={closUpLaodFile}
        onCancel={closUpLaodFile}
        style={{ width: "600px", height: "400px" }}
        maskClosable={false}
        className="uplaodFile"
        footer={false}
      >
        <Dragger name="file" customRequest={customRequest} {...propsUpLoad}>
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
          <p className="ant-upload-hint">支持单次或批量上传</p>
        </Dragger>
        <div className="bindBtn">
          <Button className="cancleBtn" onClick={closUpLaodFile}>
            取消
          </Button>
          <Button className="sureBtn" onClick={closUpLaodFile}>
            确认
          </Button>
        </div>
      </Modal>
    </div>
  );
};

export default UpLoadPage;
